import { store } from '@/store';
import {RouteRecordRaw, createRouter, createWebHashHistory} from 'vue-router';

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'base',
        component: () => import('@/views/index.vue'),
        redirect: {
            name: 'home'
        },
        children: [
            {
                path: '/home',
                name: 'home',
                component: () => import('@/views/home/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/one_page',
                name: 'onePage',
                component: () => import('@/views/onePage/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/one_page/preview',
                name: 'onePagePreview',
                component: () => import('@/views/onePage/Preview.vue'),
            },
            {
                path: '/products',
                name: 'products',
                component: () => import('@/views/products/index.vue'),
            },
            {
                path: '/products/brand_breakout',
                name: 'productsBrandBreakout',
                component: () => import('@/views/products/brandBreakout/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/brand_breakout/detail',
                name: 'productsBrandBreakoutDetail',
                component: () => import('@/views/products/brandBreakout/detail.vue'),
            },
            {
                path: '/products/brand_breakout/result',
                name: 'productsBrandBreakoutResult',
                component: () => import('@/views/products/brandBreakout/result.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/brand_breakout/strategyShare',
                name: 'strategyShare',
                component: () => import('@/views/products/brandBreakout/strategyShare.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/brand_breakout/index_select_list',
                name: 'productsBrandBreakoutIndexSelectList',
                component: () => import('@/views/products/brandBreakout/indexSelectList.vue'),
            },
            {
                path: '/products/brand_breakout/budget_consumption',
                name: 'productsBrandBreakoutBudgetConsumption',
                component: () => import('@/views/products/brandBreakout/budgetConsumption.vue'),
            },
            {
                path: '/products/brand_breakout/resource_detail',
                name: 'productsBrandBreakoutResourceDetail',
                component: () => import('@/views/products/brandBreakout/resourceDetail.vue'),
            },
            {
                path: '/products/brand_breakout/prevent_forgetting',
                name: 'productsBrandBreakoutPreventForgetting',
                component: () => import('@/views/products/preventForgetting/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/prevent_forgetting/detail',
                name: 'productsPreventForgettingDetail',
                component: () => import('@/views/products/preventForgetting/detail.vue'),
            },
            {
                path: '/products/lbs',
                name: 'productsLbs',
                component: () => import('@/views/products/lbs/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/lbs/detail',
                name: 'productsLbsDetail',
                component: () => import('@/views/products/lbs/detail.vue'),
            },
            {
                path: '/products/lbs/strategyCheck',
                name: 'productsLbsStrategyCheck',
                component: () => import('@/views/products/lbs/strategyCheck.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/select_by_tag',
                name: 'selectByTag',
                component: () => import('@/views/products/selectByTag/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/select_by_tag/detail',
                name: 'selectByTagDetail',
                component: () => import('@/views/products/selectByTag/detail.vue'),
            },
            {
                path: '/products/select_by_tag/map',
                name: 'selectByTagMap',
                component: () => import('@/views/products/selectByTag/map.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/select_by_tag/strategy_check',
                name: 'productsSelectByTagStrategyCheck',
                component: () => import('@/views/products/selectByTag/strategyCheck.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            // 京潮计划
            {
                path: '/products/jd',
                name: 'productsJd',
                component: () => import('@/views/products/jd/index.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/jd/detail',
                name: 'productsJdDetail',
                component: () => import('@/views/products/jd/detail.vue'),
            },
            {
                path: '/products/jd/map',
                name: 'productsJdMap',
                component: () => import('@/views/products/jd/map.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/jd/strategy_check',
                name: 'productsJdStrategyCheck',
                component: () => import('@/views/products/jd/strategyCheck.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            // 竞价投放
            {
                path: '/products/bid',
                name: 'productsBid',
                component: () => import('@/views/products/bid/index.vue'),
                meta: {
                    keepAlive: true,
                }
            },
            {
                path: '/products/bid/detail',
                name: 'productsBidDetail',
                component: () => import('@/views/products/bid/detail.vue'),
            },
            {
                path: '/products/bid/strategy_check',
                name: 'productsBidStrategyCheck',
                component: () => import('@/views/products/bid/strategyCheck.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/bid/report',
                name: 'productsBidReport',
                component: () => import('@/views/products/bid/report.vue'),
                meta: {
                    keepAlive: true,
                },
            },
            {
                path: '/products/third_party_report',
                name: 'productsThirdPartyReport',
                component: () => import('@/views/products/components/thirdPartyReport.vue'),
            },
            {
                path: '/products/performance_report',
                name: 'productsPerformanceReport',
                component: () => import('@/views/products/components/PerformanceReport.vue'),
            },
            // 市场份额详情
            {
                path: '/products/market_share_details',
                name: 'MarketShareDetails',
                component: ()=> import('@/views/products/MarketShareDetails.vue')
            }
        ]
    }
];

const router = createRouter({
    // hash 模式
    history: createWebHashHistory(),
    routes,
});

const keepAliveRoutes = routes[0].children.filter(route => {
    return route?.meta?.keepAlive;
});
const keepAliveRouteNameList = keepAliveRoutes.map(route => {
    return route.name;
});
store.commit('app/setKeepAliveRouteNameList', keepAliveRouteNameList);
let routerHistoryState = router.options.history.state;
router.beforeEach((to, from, next) => {
    // keep-alive的include，判断的是页面组件的name，出于方面获取与判断的考虑，取的是route的name用于判断，所以需要将组件的name与route的name保持一致
    let keepAliveRouteNameList = store.state.app.keepAliveRouteNameList;
    if (to.meta.keepAlive && keepAliveRouteNameList.indexOf(to.name) === -1) {
        keepAliveRouteNameList.push(to.name);
    }
    if (from.meta.keepAlive && to.fullPath === routerHistoryState.back) {
        keepAliveRouteNameList = store.state.app.keepAliveRouteNameList.filter(routeName => {
            return routeName !== from.name;
        });
    }
    if (to.name === 'home') {
        keepAliveRouteNameList = [];
    }
    store.commit('app/setKeepAliveRouteNameList', keepAliveRouteNameList);
    next();
});
router.afterEach((to, from) => {
    routerHistoryState = router.options.history.state;
});

export default router;
